<template>
  <div>
    <div class="button-group">
      <el-button type="primary" @click="getLog(0)">显示当天日志</el-button>
      <el-button type="primary" @click="getLog(1)">显示7天内日志</el-button>
      <el-button type="primary" @click="getLog(2)">显示全部日志</el-button>
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName">
        <el-table-column
            prop="userName"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="status"
            label="签到状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '签到失败' : '签到成功' }}
          </template>
        </el-table-column>
        <el-table-column
            prop="lastCheck"
            label="上次签到时间">
          <template slot-scope="scope">
            {{ formatDate(scope.row.lastCheck) }}
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "Logs",
  created() {
    this.getLog(0);
  },
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    formatDate(timeStamp) {
      return dayjs(timeStamp).format('YYYY-MM-DD HH:mm:ss')
    },
    tableRowClassName({row, rowIndex}) {
      if (row.status === 0) {
        return 'warning-row';
      }
    },
    getLog(flag) {
      switch (flag) {
        case 0:
          this.getData("todayLog");
          break;
        case 1:
          this.getData("sevenDaysLog");
          break;
        case 2:
          this.getData("allLog");
          break;
      }
    },
    getData(path) {
      this.$axios.get("/api/log/" + path, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        this.tableData = res.data.data;
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
